<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>
<body class="bg-gray-100 h-screen flex flex-col">
    <!-- 搜索栏 -->
    <div class="bg-white p-3 shadow flex items-center sticky top-0 z-10">
        <button class="mr-2 text-gray-500"><i class="fas fa-arrow-left"></i></button>
        <div class="relative flex-grow">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            <input type="search" placeholder="搜索景点、餐厅、洗手间..." class="w-full pl-10 pr-3 py-1.5 border rounded-full bg-gray-100 focus:outline-none focus:bg-white focus:border-blue-300">
        </div>
        <button class="ml-2 text-blue-500 font-medium">搜索</button>
    </div>

    <!-- 历史记录/热门搜索 -->
    <div class="p-4">
        <div class="mb-4">
            <h3 class="text-sm font-semibold text-gray-500 mb-2">历史记录</h3>
            <div class="flex flex-wrap gap-2">
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">知名景点A</span>
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">洗手间</span>
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">餐厅</span>
            </div>
        </div>
        <div>
            <h3 class="text-sm font-semibold text-gray-500 mb-2">热门搜索</h3>
             <div class="flex flex-wrap gap-2">
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">山顶观景台</span>
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">瀑布</span>
                <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">出口</span>
                 <span class="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer">缆车</span>
            </div>
        </div>
    </div>

    <!-- 搜索结果区 (初始隐藏，搜索后显示) -->
    <div class="flex-grow p-4 overflow-y-auto hidden"> <!-- 添加 hidden 类来初始隐藏 -->
        <h2 class="text-md font-semibold mb-3">搜索结果</h2>
        <div class="bg-white p-3 rounded-lg shadow mb-2 flex items-center space-x-3 cursor-pointer">
            <i class="fas fa-map-marker-alt text-red-500 fa-lg"></i>
            <div>
                <div class="font-medium">知名景点A</div>
                <div class="text-xs text-gray-500">景点 - 距离 500米</div>
            </div>
        </div>
         <div class="bg-white p-3 rounded-lg shadow mb-2 flex items-center space-x-3 cursor-pointer">
            <i class="fas fa-utensils text-yellow-600 fa-lg"></i>
            <div>
                <div class="font-medium">山顶餐厅</div>
                <div class="text-xs text-gray-500">餐饮 - 距离 1.2公里</div>
            </div>
        </div>
         <div class="bg-white p-3 rounded-lg shadow mb-2 flex items-center space-x-3 cursor-pointer">
            <i class="fas fa-restroom text-blue-500 fa-lg"></i>
            <div>
                <div class="font-medium">东门洗手间</div>
                <div class="text-xs text-gray-500">设施 - 距离 200米</div>
            </div>
        </div>
        <!-- 更多结果... -->
    </div>

</body>
</html>